import { Link, Route } from "react-router-dom";
import { RouteConfig, renderRoutes } from "react-router-config";
import { Helmet } from "react-helmet";

import logo from './../static/logo.svg'
import config from "../config"
import "normalize.css/normalize.css"
import styles from "./styles.module.css"

interface Route {
    route: {
        routes: RouteConfig[]
    }
}

const App = ({ route }: Route): JSX.Element => (
    <div className={ styles.App }>
        <Helmet { ...config.App }/>
        <Link to="/" className={ styles.header}>
            <img src="logo" role="presentation" />
            <h1>
                <em>{ config.APP.title }</em>
            </h1>
        </Link>
        <hr />
        { renderRoutes(route.routes) }
    </div>

)

export default App